<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="button">点我啊</button>
    <script>
      button.addEventListener("click", () => {
        console.log("listener1");
        Promise.resolve().then(() => console.log("micro task1"));
      });
      button.addEventListener("click", () => {
        console.log("listener2");
        Promise.resolve().then(() => console.log("micro task2"));
      });
      button.click(); // click1() click2() 在当前宏任务直接执行

      // 代码中的click 在当前宏任务直接执行 并且创建了两个微任务放入到队列中
      // 用户自己点击，这个时候事件已经绑定好了，点击的时候将两个任务放到了宏任务队列中
    </script>
  </body>
</html>
